<template>
  <div>
    <router-link to="/find">发现音乐</router-link> |
    <router-link :to="`/my/${id}`">我的音乐</router-link> |
    <router-link to="/friend?name=小明">朋友</router-link>
    <!-- 7、设置挂载点 -->
    <router-view></router-view>
    <div>
      <button @click="toPage">点我，跳转到发现音乐页面</button>
      <button @click="goPage">点我，跳转到我的音乐页面</button>
    </div>
  </div>
</template>
<script>
export default  {
  data(){
    return {
      id: 123
    }
  },
  methods: {
    /**
     * 编程式导航传值
     * 方式一：path跳转结合query传值
     * this.$router.push({
     *  path: "路由路径",
     *  query: {
     *    参数名: 这里写你想要传的值
     *  }
     * })
     * 接收：$route.query.参数名
     * 方式二：name跳转结合query和params传
     * this.$router.push({
     *  name: "路由名"  // 路由名需要在定义路由规则的时候声明好
     *  query: {},
     *  params: {}
     * })
     * 接收：query传值 --- $route.query.参数名
     *       params传值 --- $route.params.参数名
     * 
     * */ 
    toPage(){
      // 跳转到发现音乐页面
      this.$router.push({
        path: "/find",
        query: { // 传值成功
          age: 13
        }
        // params: { // 不成功
        //   gender: "男"
        // }
      })
    },
    goPage(){
      // 跳转到我的音乐页面
      this.$router.push({
        name: "my",
        // params: {
        //   id: 666
        // }
        query: {
          id: 777
        }
      })
    }
  }
}
</script>